<div class="content">
    <div id="example_title">
        <h1>Add/Remove Buttons</h1>
        It is easy to add and remove buttons during the run time. The example below demonstrates how to do this.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="toolbar"></div>

<!--CODE-->
<script type="module">
import { w2toolbar } from '__W2UI_PATH__'

let btnCount = 0
new w2toolbar({
    box: '#toolbar',
    name: 'toolbar',
    items: [
        { type: 'button', id: 'insert', text: 'Insert', icon: 'w2ui-icon-plus' },
        { type: 'button', id: 'append', text: 'Append', icon: 'w2ui-icon-check' },
        { type: 'button', id: 'delete', text: 'Delete', icon: 'w2ui-icon-cross' },
        { type: 'break',  id: 'break0' },
        { type: 'break',  id: 'break1' }
    ],
    onClick(event) {
        switch (event.target) {
            case 'append':
                this.add({ type: 'button', id: 'button' + btnCount, text: 'button '+ btnCount, icon: 'w2ui-icon-info' })
                btnCount++
                break
            case 'insert':
                this.insert('break0', { type: 'button', id: 'button' + btnCount, text: 'button '+ btnCount, icon: 'w2ui-icon-info' })
                btnCount++
                break
            case 'delete':
                if (btnCount <= 0) return
                btnCount--
                this.remove('button'+ btnCount)
                break
        }
    }
})
</script>
